<template>
    <div class="page">
        <div class="white-thems relative">
            <app-search>
                <router-link slot="right" class="msg-icson" to="/msg"></router-link>
            </app-search>
        </div>
        <div class="classify-view flexbox">
            <div class="app-left">
                <swiper :options="{direction: 'vertical',scrollbar: '.swiper-scrollbar',direction: 'vertical',slidesPerView: 'auto',mousewheelControl: true,roundLengths: true, /*防止文字模糊*/}" ref="myswiper">
                    <swiper-slide v-for="(item,index) in nav" :key="index">
                        <a href="javascript:;" :class="{'current':index==activeIndex}" @click="get(index,item.classifyName)">
                            <span v-text="item.classifyName"></span>
                        </a>
                    </swiper-slide>
                    <div class="swiper-scrollbar" slot="scrollbar"></div>
                </swiper>
            </div>
            <div class="app-right">
                <swiper :options="{direction: 'vertical',scrollbar: '.swiper-scrollbar',direction: 'vertical',slidesPerView: 'auto',mousewheelControl: true,freeMode: true,roundLengths: true}">
                    <swiper-slide>
                        <div v-for="(item,index) in list" :key="index" class="classify-list">
                            <div class="classify-title flexbox items-center justify-center">
                                <span v-text="item.bodyName"></span>
                            </div>
                            <ul class="flexbox">
                                <li v-for="(subItem,index) in item.items" :key="index">
                                    <router-link :to="{path:subItem.proid ? '/product/detail?proid='+subItem.proid : '/classify/result?cid='+subItem.cid}">
                                        <img class="img-responsive row" :src="subItem.image_path" />
                                        <p class="ellipsis" v-text="subItem.title"></p>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </swiper-slide>
                    <div class="swiper-scrollbar" slot="scrollbar"></div>
                </swiper>
            </div>
        </div>
        <app-footer :active-index="1"></app-footer>
    </div>
</template>

<script>
import mixin from "@/mixin";
import appSearch from "@/components/common/Search";
import appFooter from "@/components/common/Footer";
export default {
  data() {
    return {
      activeIndex: 0,
      nav: [],
      list: []
    };
  },
  mixins: [mixin],
  components: {
    appSearch,
    appFooter
  },
  computed: {
    swiper() {
      return this.$refs.myswiper.swiper;
    }
  },
  methods: {
    load_classify_index() {
      this.api.get_classify_index().then(response => {
        // 赋值
        var data = response.data.result;
        this.nav = data.nav;
        this.list = data.bodyItems;
      });
    },

    // 左侧导航点击事件
    get(index, key) {
      this.activeIndex = index;
      this.swiperTo(this.swiper, index, 5);
    }
  },
  created() {
    // 初始化数据
    this.load_classify_index();
  }
};
</script>
<style src="@/assets/scss/classify.scss" lang="scss"></style>
